<template>
  <div ref="chart1" :style="{ width: '100%', height: '535px' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { reqLineAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any

let legend = ref([])
let xData = ref([])
let yData1 = ref([])
let yData2 = ref([])
const init = async () => {
  let res = await reqLineAPI()
  legend.value = res.result.legend
  xData.value = res.result.x
  yData1.value = res.result.y1
  yData2.value = res.result.y2
  // console.log(legend.value,xData.value,yData1.value,yData2.value)
}
onMounted(() => {
  init().then(() => {
    // 获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      backgroundColor: '#043491',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
        formatter: function (params) {
          var result = params[0].name + '<br>'
          params.forEach(function (item) {
            result += item.seriesName + ': ' + item.value + '%' + '<br>'
          })
          return result
        },
      },
      legend: {
        x: 'center',
        y: '40px',
        textStyle: {
          color: '#f2f2f2',
          fontSize: 13,
        },
        icon: 'circle',
        data: legend.value,
      },
      dataZoom: [
        {
          type: 'slider',
          show: true,
          height: 20,
          left: '10%',
          right: '10%',
          bottom: '2%',
          start: 50,
          end: 100,
          textStyle: {
            color: '#d4ffff',
            fontSize: 11,
          },
        },
        {
          type: 'inside',
        },
      ],
      grid: {
        right: '5%',
        bottom: '10%',
        left: '2%',
        top: '80px',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: xData.value,
          name: '时间',
          nameTextStyle: {
            color: '#d4ffff',
          },
          axisLine: {
            lineStyle: {
              color: '#0B4CA9',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#FFF',
              fontSize: 12,
            },
            //interval:0,
            //rotate:30
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '涨跌幅(%)',
          nameTextStyle: {
            color: '#d4ffff',
          },
          position: 'left',
          axisLine: {
            lineStyle: {
              color: '#0B4CA9',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#0B4CA9',
            },
          },
          axisLabel: {
            color: '#d4ffff',
            fontSize: 12,
            formatter: '{value}%',
          },
        },
      ],
      series: [
        {
          name: legend.value[0],
          type: 'line',
          yAxisIndex: 0,
          symbolSize: 12,
          itemStyle: {
            normal: {
              color: '#FC30EE',
            },
          },
          data: yData1.value,
        },
        {
          name: legend.value[1],
          type: 'line',
          yAxisIndex: 0,
          symbolSize: 12,
          itemStyle: {
            normal: {
              color: '#0EF100',
            },
          },
          data: yData2.value,
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style></style>
